<template>
    <div class="goods">
        <div class="scroll-nav-wrapper">
            <cube-scroll-nav
                :side=true
                :data="goods"
                :options="scrollOptions"
                v-if="goods.length"
            >
                <!-- 左侧商品类型 -->
                <!-- 插槽 插入子类bar的slot，并定义插槽作用域名称为props -->
                <!-- 将插槽作用域中的数据传入cube-scroll-nav-bar组件 -->
                <template slot="bar" slot-scope="props">
                    <cube-scroll-nav-bar
                        direction="vertical"
                        :labels="props.labels"
                        :txts="barTxts"
                        :current="props.current"
                    >
                        <!-- 插槽 定义插槽作用域名称为props -->
                        <template slot-scope="props">
                            <!-- 商品类型 -->
                            <div class="text">
                                <!-- 商品类型图标 -->
                                <support-ico
                                    v-if="props.txt.type>=1"
                                    :size=3
                                    :type="props.txt.type"
                                >
                                </support-ico>
                                <span>{{props.txt.name}}</span>
                                <!-- 商品类型上的购买数量 -->
                                <span class="num" v-if="props.txt.count">
                                    <bubble :num="props.txt.count"></bubble>
                                </span>
                            </div>
                        </template>
                    </cube-scroll-nav-bar>
                </template>
                <!-- 右侧商品列表 -->
                <cube-scroll-nav-panel
                    v-for="good in goods"
                    :key="good.name"
                    :label="good.name"
                    :title="good.name">
                    <ul>
                        <li
                            @click="selectFood(food)"
                            v-for="food in good.foods"
                            :key="food.name"
                            class="food-item">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon">
                            </div>
                            <!-- 商品内容 -->
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                                <div class="cart-control-wrapper">
                                    <cart-control @add="onAdd" :food="food"></cart-control>
                                </div>
                            </div>
                        </li>
                    </ul>
                </cube-scroll-nav-panel>
            </cube-scroll-nav>
        </div>
        <!-- 购物车组件 -->
        <div class="shop-cart-wrapper">
            <shop-cart
                ref="shopCart"
                :select-foods="selectFoods"
                :delivery-price="seller.deliveryPrice"
                :min-price="seller.minPrice"
            >
            </shop-cart>
        </div>
    </div>
</template>

<script>
    import { getGoods } from 'api'
    // 滑动参数，防止页面斜线滑动
    import { optionMixin } from 'common/mixins/scroll'
    import ShopCart from 'components/shop-cart/shop-cart'
    import CartControl from 'components/cart-control/cart-control'
    import SupportIco from 'components/support-ico/support-ico'
    import Bubble from 'components/bubble/bubble'

    export default {
        mixins: [optionMixin],
        name: 'goods',
        props: {
            data: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                goods: [],
                selectedFood: {}
            }
        },
        computed: {
            seller() {
                return this.data.seller
            },
            selectFoods() {
                let ret = []
                // 将有选择数量的food加入到ret数组
                this.goods.forEach((good) => {
                    good.foods.forEach((food) => {
                        if (food.count) {
                            ret.push(food)
                        }
                    })
                })
                return ret
            },
            // 遍历商品类型，得出每个商品类型所选商品数量
            barTxts() {
                let ret = []
                this.goods.forEach((good) => {
                    const { type, name, foods } = good

                    let count = 0
                    foods.forEach((food) => {
                        count += food.count || 0
                    })
                    ret.push({
                        type,
                        name,
                        count
                    })
                })
                return ret
            }
        },
        methods: {
            selectFood(food) {
                this.selectedFood = food
                this._showFood(food)
                // 显示购物车镜像
                this._showShopCartSticky()
            },
            // 显示商品详情
            _showFood() {
                this.foodComp = this.foodComp || this.$createFood({
                    $props: {
                        food: 'selectedFood'
                    },
                    $events: {
                        leave: () => {
                            this._hideShopCartSticky()
                        },
                        add: (el) => {
                            this.shopCartStickyComp.drop(el)
                        }
                    }
                })
                this.foodComp.show()
            },
            // 显示购物车sticky（挂载于根节点下的购物车镜像）
            _showShopCartSticky() {
                this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({
                    $props: {
                        selectFoods: 'selectFoods',
                        deliveryPrice: this.seller.deliveryPrice,
                        minPrice: this.seller.minPrice,
                        fold: true,
                        // 是否是商品界面创建
                        isGoods: true
                    }
                })
                this.shopCartStickyComp.show()
            },
            // 隐藏购物车镜像
            _hideShopCartSticky() {
                this.shopCartStickyComp.hide()
            },
            // 供父类调用以获取商品信息
            fetch() {
                if (!this.fetched) {
                    this.fetched = true
                    getGoods({
                        id: this.seller.id
                    }).then((goods) => {
                        this.goods = goods
                    })
                }
            },
            onAdd(el) {
                // 调用购物车组件实例的drop方法
                this.$refs.shopCart.drop(el)
            }
        },
        components: {
            ShopCart,
            CartControl,
            SupportIco,
            Bubble
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/mixin"
    @import "~common/stylus/variable"

    .goods
        position: relative
        text-align: left
        height: 100%
        /* 将font-size设置为0 以消除元素见空格字符对样式的影响 */
        font-size: 0
        .scroll-nav-wrapper
            position: absolute
            width: 100%
            top: 0
            left: 0
            bottom: 48px
        // 商品类型列表
        >>> .cube-scroll-nav-bar
            width: 80px
            white-space: normal
            overflow: hidden
        // 商品类型
        >>> .cube-scroll-nav-bar-item
            padding: 0 10px
            display: flex
            align-items: center
            height: 56px
            line-height: 14px
            font-size: $fontsize-small
            background: $color-background-ssss
            .text
                flex: 1
                position: relative
            .support-ico
                display: inline-block
                vertical-align: top
                margin-right: 4px
            .num
                position: absolute
                right: -8px
                top: -10px
        // 商品列表被点击样式
        >>> .cube-scroll-nav-bar-item_active
            background: $color-white
            color: $color-dark-grey
        // 右侧商品列表中的商品类型标题
        >>> .cube-scroll-nav-panel-title
            padding-left: 14px
            height: 26px
            line-height: 26px
            border-left: 2px solid $color-col-line
            font-size: $fontsize-small
            color: $color-grey
            background: $color-background-ssss
        // 商品
        .food-item
            display: flex
            margin: 18px
            padding-bottom: 18px
            position: relative
            &:last-child
                border-none()
                margin-bottom: 0
            // 商品图标
            .icon
                flex: 0 0 57px
                margin-right: 10px
                img
                    height: auto
            .content
                flex: 1
                .name
                    margin: 2px 0 8px 0
                    height: 14px
                    line-height: 14px
                    font-size: $fontsize-medium
                    color: $color-dark-grey
                // 月售、好评率
                .desc, .extra
                    line-height: 10px
                    font-size: $fontsize-small-s
                    color: $color-light-grey
                .desc
                    line-height: 12px
                    margin-bottom: 8px
                .extra
                    .count
                        margin-right: 12px
                .price
                    font-weight: 700
                    line-height: 24px
                    .now
                        margin-right: 8px
                        font-size: $fontsize-medium
                        color: $color-red
                    .old
                        text-decoration: line-through
                        font-size: $fontsize-small-s
                        color: $color-light-grey
            .cart-control-wrapper
                position: absolute
                right: 0
                bottom: 12px
        // 购物车
        .shop-cart-wrapper
            position: absolute
            left: 0
            bottom: 0
            z-index: 50
            width: 100%
            height: 48px
</style>
